import BaseComponent from '../common/extends/baseComponent'
import {
  _SCALE_IN_FROM,
  _SCALE_IN_TO,
  _SCALE_OUT_FROM,
  _SCALE_OUT_TO,
  _FADE_IN_FROM,
  _FADE_IN_TO,
  _FADE_OUT_FROM,
  _FADE_OUT_TO
} from '../../common/animate/index'
BaseComponent({
  /**
   * 组件的属性列表
   * @param {boolean} visible 显示/隐藏
   * @param {string} width dialog的内容区宽度.默认80%
   * @param {boolean} maskClose 点击遮罩层是否可以关闭？
   * @param {string} height dialog的内容区高度，可选
   */
  properties: {
    visible: {
      type: Boolean,
      value: false,
      observer(show) {
        if (show) {
          this._in()
        } else {
          this._out()
        }
      }
    },
    width: {
      type: String,
      value: '80%'
    },
    maskClose: {
      type: Boolean,
      value: false
    },
    height: {
      type: String,
      value: ''
    }
  },
  data: {
    _animation: {},
    _bganimation: {},
    _visible: false // out 动画完成
  },
  methods: {
    _in() {
      this.setData({
        _visible: true,
        _animation: _SCALE_IN_FROM,
        _bganimation: _FADE_IN_FROM
      }, () =>
          setTimeout(() => {
            this.setData({
              _animation: _SCALE_IN_TO,
              _bganimation: _FADE_IN_TO
            })
          }, 20)
      )
    },
    _out() {
      this.setData({
        _animation: _SCALE_OUT_FROM,
        _bganimation: _FADE_OUT_FROM
      }, () => {
        setTimeout(() => {
          this.setData({
            _animation: _SCALE_OUT_TO,
            _bganimation: _FADE_OUT_TO
          }, () =>
              setTimeout(() => {
                this.setData({
                  _visible: false
                })
              }, 20)
          )
        }, 200)
      })
    },
    handleClose() {
      this.setData({
        visible: false
      })
      this.triggerEvent('close', false)
    },
  },
  ready() {
    this.setData({
      _animation: _SCALE_IN_FROM,
      _bganimation: _FADE_IN_FROM
    })
  }
})